<template>
    <div class="more">
        <div class="jumpLoad" v-if="isLoading">
          <div >
            <img  class="jumpLoadIMG" src="../../public/img/loading.gif" alt="">
            <span class="txt">正在加载中...</span>
          </div>
        </div>

        <van-overlay :show="show" @click="show = false">
            <div class="addCarHelp" @click.stop>
                <div class="block" >添加购物车成功</div>
            </div>
        </van-overlay>
        <header>
            <img :src="'/img/'+titIMG" alt="">
        </header>
        <div class="tit">
            <van-icon @click="backStory()" class="backBtn" name="arrow-left" /> <span> {{titTag}}</span>
        </div>
    <div class="shop-con">
        <div class="shop-demo" v-for="(v,i) in renderData" @click="jumpHref(v.id,'Detail','goodsID')">
           <div class="img-box"><img class="loadIMG" src="../../public/img/list-img.png" :datasrc="'/img/'+v.g_demoIMG" alt=""></div>
            <div class="txt">
                <h3 class="p-one">Deep Bailey's Lovers</h3>
            <p class="name">{{v.NAME}}</p>
            <p class="weight"><span class="price">￥{{v.s_money}}</span>{{v.g_shopWeight}}g/{{v.u_unit=="磅"?(v.g_shopWeight/454).toFixed(1):"一"}}{{v.u_unit}}<span><van-icon @click.stop="addCarF(v.id,v.g_shopWeight+'g'+'('+(v.u_unit=='个'?'一'+v.u_unit:(v.g_shopWeight/454).toFixed(1)+''+v.u_unit)+')')" name="shopping-cart-o" /></span></p>
            </div>
        </div>

    </div>
    <myFooter></myFooter>
    </div>
</template>

<script>
    import Vue from 'vue'
    import myFooter from '../components/MyFooter.vue'
    import { Icon,Button } from 'vant';

    Vue.use(Icon);
    export default {
        name: "more",
        components:{
            myFooter
        },
        data(){
          return {
              titIMG:'',
              titTag:'',
              renderData:[],
              show:false,
              buyCarData:'',
              isLoading:true
          }
        },
        watch:{
          renderData(){
              this.$nextTick(function () {
                  this.isLoading=false;
                  var getLoadIMG=document.querySelectorAll('.loadIMG');
              loadingIMG();
              function loadingIMG(){
                  var clintH=window.document.documentElement.clientHeight;
                  var scollH=window.document.documentElement.scrollTop;

                  getLoadIMG.forEach(function (item,index) {
                     if (item.offsetTop<=(clintH+scollH)){
                        item.setAttribute('src',item.getAttribute('datasrc'))
                     }

                  });

              };
              window.addEventListener("resize",loadingIMG );
              window.addEventListener("scroll", loadingIMG );
              })
          }
        },
    methods:{
            backStory(){
              this.$router.back();
            },
        jumpHref(v,target,pro){
            this.$router.push({path: '/'+target+'?'+pro+'='+v})
            return false;
        },
        addCarF(id,weight){
            this.buyCarData.push({
                goods_id:id,
                weight:weight,
                goods_num:1
            });
            var temp=[];
            var narr=[];
            for (var i=0;i<this.buyCarData.length;i++){
                var n=temp.indexOf(this.buyCarData[i].goods_id);
                if (n==-1){
                    temp.push(this.buyCarData[i].goods_id);
                    narr.push({weight:this.buyCarData[i].weight,goods_num:this.buyCarData[i].goods_num||1,goods_id:this.buyCarData[i].goods_id})
                }else {
                    narr[n].goods_num+=1
                }
            };
            window.localStorage.setItem('waresLists',JSON.stringify(narr));
            this.show=true;
            setTimeout(()=>{
                this.show=false
            },1000)
        }
    }
    ,
        mounted(e) {
            window.document.documentElement.scrollTop=0;
            if (window.localStorage.waresLists){
                this.buyCarData=JSON.parse(window.localStorage.waresLists);
            } else {
                this.buyCarData=[]
            }
            this.axios.get('/api/moreData',{
                params:{
                    tagName:this.$route.query.tagName
                }}).then((res)=>{
                 this.renderData=res.data;
                 this.titIMG=this.renderData[0].tit_img;
                 this.titTag=this.renderData[0].tag_name;
            });




        }

    }
</script>

<style scoped lang="less">
    @import "../../public/utilStyle";
    .more{
        .jumpLoad{
            .jumpLoadIMG{
                position: absolute;
                left: 11.5rem;
                top: 2rem;
                width: 2rem;
                height: 2rem;
            }
            .txt{
                font-size: 2rem;
                padding-top: 2rem;
                width: 100%;
                line-height: 100%;
                height: 100%;
                display: block;
                color: #989898;
                padding-left: 1rem;
            }
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: white;
            z-index: 9999;
            >div{
                text-align: center;
                width: 100%;
                line-height: 100%;
                height: 100%;
            }
        }
        .addCarHelp{
            background: white;
            color: #ec5051;
            text-align: center;
            .px2rem(font-size,24);
            .px2rem(width,200);
            .px2rem(line-height,100);
            .px2rem(height,100);

            position: absolute;
            top: 50%;
            left: 50%;
            margin: -2.5rem 0 0 -5rem;
        }
        header{

            .px2rem(height,300);
            .px2rem(width,750);

            img{
              .px2rem(height,300);
              .px2rem(width,750)
            }
        }
        .tit{

            .backBtn{
                position: absolute;

                left: 1rem;
                top: 1.45rem;
            }
            position: sticky;
            z-index: 999;
            top: 0;
            line-height: 5rem;
            height: 5rem;
            width: 100%;
            text-align: center;
            color: #9a9a9a;
            background: #fafafa;
            border-bottom: 1px solid #cccccc;
            font-size: 2rem;
        }
    .shop-con{
        .txt{
            .px2rem(padding-left,15);

        }
        overflow: hidden;
        .px2rem(width,690);
        margin: 0 auto 0;
        .shop-demo:nth-child(even){
            margin-left: 5%;
        }
        .shop-demo{
            float: left;
            width: 45%;
            .img-box{
                width: 100%;
                .px2rem(height,300);
                img{
                    width: 100%;
                    .px2rem(height,300);
                }
            }
            .price{
                color: #9b9b9b;
                font-weight: bold;
                padding-right: 0.5rem;
            }
            .weight{
                padding-top: 0.5rem;
                color: #9b9b9b;
                font-weight: bold;
                position: relative;
               i{
                   position: absolute;
                   right: 0;
                   bottom: 0.25rem;
                    font-size: 2rem;
                   float: right;
                   color: black;
                }
            }
        }
    }
    }
</style>